<?php
/* Smarty version 3.1.33, created on 2019-12-15 10:17:07
  from 'D:\xampp\htdocs\ps_project\application\views\templates\diner\shop\test2.html' */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '3.1.33',
  'unifunc' => 'content_5df5fa135fff92_01939383',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    'cff01a5c3c70c945a2d81794534f52119ad678ac' => 
    array (
      0 => 'D:\\xampp\\htdocs\\ps_project\\application\\views\\templates\\diner\\shop\\test2.html',
      1 => 1576323593,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
),false)) {
function content_5df5fa135fff92_01939383 (Smarty_Internal_Template $_smarty_tpl) {
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            height: 1500px;
        }
        .cart {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 320px;
            height: auto;
        }
        .wrapper {
            display: grid;
            width: 320px;
            height: 46px;
            grid-template-columns: 195px 125px;
        }
        .cart-info {
            background-color: #2c2c2c;
            display: flex;
            align-items: flex-end;
        }
        .money-icon {
            color: #e4e4e4;
            margin-bottom: 6px;
            margin-left: 9px;
            font-size: 20px;
        }
        .money-count {
            color: #e3e3e3;
            font-size: 28px;
            margin-bottom: 6px;
        }
        .cart-status {
            background-color: #e4e4e4;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-icon img {
            width: 30px;
        }
        .cart-icon {
            margin-left: 4px;
            margin-bottom: 2px;
        }
        .status-info {
            font-size: 14px;
            color: #333;
        }
        .single-order {
            width: 320px;
            height: auto;
            padding-right: 24px;
            padding-left: 20px;
        }
        .order-info {
            width: 290px;
            height: 46px;
            display: flex;
            align-items: center;
            border-top-color: #eee;
            border-top-style: solid;
            border-top-width: 1px;
            justify-content: space-between;
            padding-right: 9px;
        }
        .cart-header-content {
            width: 290px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cart-header {
            width: 320px;
            height: auto;
            padding-left: 20px;
            padding-right: 24px;
            background-color: #fafafa;
            border-top: 2px solid #0089dc;
        }
        .order-food-name {
            width: 100px;
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .order-num-select {
            display: table;
        }
        .add-num {
            border: 1px solid #ddd;
            display: table-cell;
            width: 20px;
            height: 20px;
            padding: 0;
            margin: 0;
            background-color: #f7f7f7;
            outline: 0;
        }
        .input-num {
            border: 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            width: 33px;
            height: 18px;
            display: table-cell;
            padding: 0;
            margin: 0;
            cursor: pointer;
            outline: 0;
        }
        .minus-num {
            display: table-cell;
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            padding: 0;
            margin: 0;
            background-color: #f7f7f7;
            outline: 0;
        }
        .add-num:active {
            color: blue;
            background-color: #ddd;
        }
        .minus-num:active {
            color: blue;
            background-color: #ddd;
        }
        .money-of-this-food {
            color: #f17530;
        }
        .cart-pieces {
            position: absolute;
            height: 16px;
            left: 26px;
            min-width: 16px;
            border-radius: 50%;
            font-size: 12px;
            text-align: center;
            background-color: #ff2828;
            color: #fff;
            font-weight: 700;
            bottom: 23px;
        }
        #emptyCart {
            color: blue;
        }
    </style>
    <?php echo '<script'; ?>
 src="../node_modules/jquery/dist/jquery.min.js"><?php echo '</script'; ?>
>
    <?php echo '<script'; ?>
 src="../node_modules/popper.js/dist/popper.min.js"><?php echo '</script'; ?>
>
    <?php echo '<script'; ?>
 src="../node_modules/bootstrap/dist/js/bootstrap.min.js"><?php echo '</script'; ?>
>
</head>
<body>
<div class="cart">
    <div class="cart-header">
        <div class="cart-header-content">
            <div style="color: #333333; font-size: 14px">
                购物车<span id="emptyCart">[清空]</span>
            </div>
            <div>
                <img src="assets/images/cart.svg" style="width: 30px;">
            </div>
        </div>
    </div>
    <div class="single-order">
        <div class="order-info">
            <p class="order-food-name">热大紅袍奶茶</p>
            <div class="order-num-select">
                <button class="add-num" type="button">-</button>
                <input class="input-num">
                <button class="minus-num" type="button">+</button>
            </div>
            <div class="money-of-this-food">￥16</div>
        </div>
    </div>
    <div class="single-order">
        <div class="order-info">
            <p class="order-food-name">热大紅袍奶茶</p>
            <div class="order-num-select">
                <button class="add-num" type="button">-</button>
                <input class="input-num">
                <button class="minus-num" type="button">+</button>
            </div>
            <div class="money-of-this-food">￥16</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="cart-info">
            <span class="cart-icon"><img src="assets/open-iconic/svg/cart.svg"><span class="cart-pieces">2</span></span>
            <span class="money-icon">￥</span><span class="money-count">16</span>
        </div>
        <div class="cart-status">
            <p class="status-info">购物车是空的</p>
        </div>
    </div>
</div>
</body>
</html>
<?php }
}
